<template>
  <span ref="scrollIntoView"></span>
  <div class="item-box">
    <div class="banner-box">
      <img
        v-if="store.childModel.value"
        class="banner-img"
        :src="$filters.getLinkUrl(store.childModel.value + '?imageView2/1/w/1440/h/500/format/webp')"
        alt=""
      />
      <UnitImageNull v-else></UnitImageNull>
    </div>
    <div class="banner-content">
      <div>
        <titles :title="store.childModel.text" />
      </div>

      <div style="width: 980px; margin: auto; padding: 50px 0; text-indent: 2em; line-height: 32px">
        <span
          class="banner-content-title"
          :style="{
            fontSize: store.styleInfo.contentSize,
            fontFamily: store.styleInfo.textFamily,
            color: store.styleInfo.fontColor,
          }"
          >{{ store.childModel.remarks }}</span
        >
      </div>
    </div>
    <div class="child-content">
      <!-- 第二级 -->
      <!-- <pageChildItem1 v-if="store.childModel.children.length > 0" /> -->
      <pageChildItem1 />
    </div>
  </div>
  <NavVue :flag="true"></NavVue>
</template>

<script setup lang="ts">
// @ts-nocheck
import titles from '@/components/title/title.vue';
import pageChildItem1 from './components/pageChildItem1.vue';
import UnitImageNull from '@/components/unitImageNull/unitImageNull.vue';

import pageChildItem2 from './components/pageChildItem2.vue';
import { storeToRefs } from 'pinia';
import { useProjectStore } from '@/store';
import { useRouter, useRoute } from 'vue-router';
import { onMounted, watch } from 'vue';
const store = useProjectStore();
const { childModel, tabvalue, styleInfo } = storeToRefs(store);
const route = useRoute();
const current = Number(route.query.current);
watch(
  () => styleInfo,
  (value) => {
    const foundElement = styleInfo.value.moduleList.find((item) => item.id === store.childModel.id);
    store.setchildModel(foundElement);
  },
  { immediate: true, deep: true },
);
watch(
  () => childModel,
  (value) => {
    // store.childModel = store.childModel;
  },
  { deep: true },
);
onMounted(() => {
  // var tem1ID = document.getElementById('tem1-heard-item');
  // if (store.childModel.value) {
  //   tem1ID.style.background = 'rgba(0, 0, 0, 0.4)';
  // }
  // console.log('tem1ID', tem1ID);
});
</script>
<style scoped lang="less">
.banner-box {
  width: 100%;
  min-width: 1440px;
  height: 500px;
  margin-bottom: 80px;
  img {
    width: 100%;
    height: 100%;
  }
}
.banner-content-titl {
  text-indent: 2em;
}
</style>
